/** HTML5 settings */
header,nav,section,article,footer{
	display:block;
}

/** section1: 全体設定 */

body {
	margin: 0;
	padding: 0;
}
#main {
	width: 760px;
	margin: 3px auto;
	border: 1px solid black;
}

.c {
	clear:both
}

/** section2: header area */
header{
	position:relative;
}

/* 戻るボタン */
header .left{
	position:absolute;
	display:none;
}
header .back{
	display: none;
}

/* タイトル */
header h1{
	padding: 0;
	margin: 0;
	text-align:center;
}



/** section3: ナビゲーション＆本文area */

#contents{
    margin-top: 5px;
}

/* ナビゲーション */
nav {
	width:220px;
	float: left;
}

/* PCの時は縦に並べる */
nav ul {
	margin: 0;
	padding: 0;
}

nav li {
  list-style-type:none;
  padding: 3px 0px 2px 11px;
}

nav a {
	color: blue;
}

/* 選択リンクを強調表示 */
nav a.selected{
    font-weight: bold;
}



/* 本文エリア(PC & スマフォ共通) */

#body_ {
    width: 530px;
    margin-left: 230px;
}

#body_ h2 {
	text-align:left;
	margin: 0px 0 7px 4px;
	padding: 2px 0 2px 12px;
	border-left: 5px solid blue;
}

#body_ .image{
	text-align:center;
}

#body_ p{
	padding: 0.5em 1em;
}

/** section 4: footer area */
footer {
    margin-top: 5px;
}


/**
 * スマートフォン用の設定変更点
 *
 */
@media screen and (max-device-width: 480px) {
	/* 全体表示枠を縮小 */
	#main {
		width: 320px;
		margin:0px;
		padding:0px;
	}
	
	/* 戻るボタンのデザイン */
	header .left{
		width: 64px;
		height:100%;
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;
	}
	
	header .back {
		background: #333;
		border-radius: 7px;
		padding: 3px 5px;
		-webkit-box-shadow: 1px 1px 1px gray;
	}
	
	header .back a {
		color: white;
		font-weight: bold;
		text-decoration: none;
	}

  /* ナビゲーションのデザイン */
	nav {
    	width: 100%;
	}
	nav li {
		display: block;
		float:left;
		text-align: center;
	}
	nav .navsmpimg {
	    margin-top: 3px;
	    border-radius: 12px;
	    width: 64px;
	    height: 64px;
	    -webkit-box-shadow: 1px 1px 1px gray, -1px -2px 5px 5px rgba(255,255,255,0.6) inset;
	}
	nav .navsmpname {
		font-size: 0.75em;
	}
	nav ul:after {
		clear:both;
		content: '';
		display:block;
	}

	/** 本文エリアのデザイン変更と、アニメーション設定 */
	#body_ {
		width:100%;
		margin: 0;
		position:absolute;
		background: white;
		z-index: 101;
		-webkit-transition: all 0.5s ease-in-out;  
		-webkit-transform-origin: 50% 20%; 
		-webkit-transform:scale(0,0);
		opacity: 0;
	}
    #body_[effect=on]{
        -webkit-transform:scale(1,1);
        opacity: 1;
	}
}
